import {
  Box, Button, Flex, FormControl, FormLabel, Input, InputGroup,
  InputLeftAddon, InputLeftElement, InputRightAddon, LightMode, Link, Radio, RadioGroup,
  Select, Stack, Switch, Text
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'
import { MdPhoneIphone } from 'react-icons/md'
import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'
import axios from 'axios'

export default function SignUp() {
  // const initialValues = {username: 'Jacob221111', password: '12345678', email: '940666845@qq.com2'}
  const initialValues = {username: '', password: '', email: ''}
  const handleSubmit = async (values, actions) => {
    console.log(values)
    const postUrl = "https://conduit.productionready.io/api/users"
    const params = {"user":{"username": values.username,"email": values.email, "password": values.password}}
    try
    {
      const {data} = await axios.post(postUrl, params)
      if(data.user.token) {
        alert("注册成功")
      }
    }catch({error, response}){
      console.log(response)
      if(response.status && response.status == 422) {
        if(response.data.errors.username) {
          actions.setFieldError('username',`username ${response.data.errors.username}`)
        }
        if(response.data.errors.email) {
          actions.setFieldError('email',`email ${response.data.errors.email}`)
        }
        if(response.data.errors.password) {
          actions.setFieldError('password',`password ${response.data.errors.password}`)
        }
      }
    }
  }
  const validationSchema = Yup.object({
    username: Yup.string().required('用户名不能为空').max(25, '用户名长度不能大于25'),
    email: Yup.string().required('邮箱不能为空'),
    password: Yup.string().required('密码不能为空').min(8, '密码长度不能小于8'),
  })
  const getComponent = (props) => {
    let errorCom = null
    if (props.errors.username || props.errors.password || props.errors.email) {
      errorCom = <div>{props.errors.username || props.errors.password || props.errors.email}</div>
    }
    return (
      <Form>
      <Stack mb="50px" direction="column" spacing={4}>
                  {errorCom ? errorCom : null}

        <Stack spacing={0}>
          <Field name="username">
            {
              ({ field, form }) => {
                return (
                  <FormControl>
                    <InputGroup>
                      <InputLeftElement pointerEvents="none" children={<FaUserAlt />} />
                      <Input {...field} borderRadius="5px 5px 0 0" placeholder="你的昵称" />
                    </InputGroup>
                  </FormControl>
                )
              }
            }
          </Field>
          <Field name="email">
            {
              ({field, form}) => {
               return <FormControl>
                  <InputGroup>
                    <InputLeftElement pointerEvents="none" children={<MdPhoneIphone />} />
                    <Input {...field} borderRadius="0 0 0 0" placeholder="邮箱号码" />
                  </InputGroup>
                </FormControl>

              }
            }
          </Field>
          <Field name="password">
            {
              ({field,form}) => {
              return <FormControl>
            <InputGroup>
              <InputLeftElement pointerEvents="none" children={<FaLock />} />
              <Input {...field} borderRadius="0 0 5px 5px" placeholder="设置密码" />
            </InputGroup>
          </FormControl>            
              }
            }
          </Field>

        </Stack>
        <Stack>
          <Button type="submit" borderRadius="50px" bgColor="green.400" color="white">注册</Button>
        </Stack>
        <Stack align="center" fontSize="10px">
          <Text>点击 “注册” 即表示您同意并愿意遵守简书</Text>
          <Text><Link color="blue.400">用户协议</Link>和<Link color="blue.400">隐私政策</Link> 。</Text>
        </Stack>
      </Stack>
      </Form>
    )
  }
  return (
  <Formik validateOnBlur={false} validateOnChange={false} initialValues={initialValues} 
  onSubmit={handleSubmit} validationSchema={validationSchema}>
    {
      getComponent
    }
  </Formik>
  )
}